<template>
    <div class="app-container">
        <!-- 表单，用于输入查询商品信息，如商品名称、品牌和分类 -->
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <!-- 表单项：商品名称 -->
            <el-form-item label="商品名称" prop="name">
                <!-- 输入框，用于输入商品名称 -->
                <el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <!-- 表单项：品牌 -->
            <el-form-item label="品牌">
                <!-- 下拉选择框，用于选择商品品牌 -->
                <el-select v-model="queryParams.brandId" class="m-2" placeholder="选择品牌" size="small"
                    style="width: 100%">
                    <!-- 遍历品牌列表，生成下拉选项 -->
                    <el-option v-for="item in queryBrandList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <!-- 表单项：分类 -->
            <el-form-item label="分类">
                <!-- 一级分类选择 -->
                <el-select v-model="queryParams.category1Id" @change="selectcategory1" class="m-2" placeholder="一级分类"
                    size="small" style="width: 32%;margin-right: 5px;">
                    <!-- 遍历一级分类列表，生成下拉选项 -->
                    <el-option v-for="item in queryCategory1List" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <!-- 二级分类选择 -->
                <el-select v-model="queryParams.category2Id" @change="selectcategory2" class="m-2" placeholder="二级分类"
                    size="small" style="width: 32%;margin-right: 5px;">
                    <!-- 遍历二级分类列表，生成下拉选项 -->
                    <el-option v-for="item in queryCategory2List" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <!-- 三级分类选择 -->
                <el-select v-model="queryParams.category3Id" class="m-2" placeholder="三级分类" size="small"
                    style="width: 32%;">
                    <!-- 遍历三级分类列表，生成下拉选项 -->
                    <el-option v-for="item in queryCategory3List" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <!-- 表单项：操作按钮 -->
            <el-form-item>
                <!-- 搜索按钮 -->
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <!-- 重置按钮 -->
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 控制按钮行 -->
        <el-row :gutter="10" class="mb8">
            <!-- 新增商品按钮 -->
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
            </el-col>
            <!-- 修改商品按钮，单选时可用 -->
            <el-col :span="1.5">
                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
            </el-col>
            <!-- 删除商品按钮，多选时可用 -->
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
            </el-col>
            <!-- 右侧工具栏，用于切换查询界面显示 -->
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!-- 商品列表 -->
        <el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
            <!-- 列选择器 -->
            <el-table-column type="selection" width="55" align="center" />
            <!-- 商品ID列 -->
            <el-table-column prop="id" label="ID" width="60" />
            <!-- 商品轮播图列 -->
            <el-table-column label="轮播图" #default="scope" width="200">
                <!-- 遍历显示每个轮播图图片 -->
                <div style="height: 50px;float: left;">
                    <img v-for="(item, index) in scope.row.sliderUrlList" :key="index" :src="item" width="50" />
                </div>
            </el-table-column>
            <!-- 商品名称列 -->
            <el-table-column prop="name" label="商品名称" width="160" />
            <!-- 品牌列 -->
            <el-table-column prop="brandName" label="品牌" />
            <!-- 一级分类列 -->
            <el-table-column prop="category1Name" label="一级分类" />
            <!-- 二级分类列 -->
            <el-table-column prop="category2Name" label="二级分类" />
            <!-- 三级分类列 -->
            <el-table-column prop="category3Name" label="三级分类" />
            <!-- 计量单位列 -->
            <el-table-column prop="unitName" label="计量单位" />
            <!-- 状态列 -->
            <el-table-column prop="status" label="状态" #default="scope">
                {{ scope.row.status == 0 ? '未上架' : scope.row.status == 1 ? '上架' : '下架' }}
            </el-table-column>
            <!-- 审核状态列 -->
            <el-table-column prop="auditStatus" label="审核状态" #default="scope">
                {{ scope.row.auditStatus == 0 ? '未审核' : scope.row.auditStatus == 1 ? '通过' : '驳回' }}
            </el-table-column>
            <!-- 操作列 -->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
                <!-- 操作按钮，根据商品状态显示不同的按钮 -->
                <template #default="scope">
                    <!-- 修改、删除、审核通过、驳回等按钮 -->
                    <el-button v-if="scope.row.auditStatus == 0" link type="primary" icon="Edit"
                        @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button v-if="scope.row.auditStatus == 0" link type="primary" icon="Delete"
                        @click="handleDelete(scope.row)">删除</el-button>
                    <el-button v-if="scope.row.auditStatus == 0" link type="success"
                        @click="handleAudit(scope.row.id, 1)">通过</el-button>
                    <el-button v-if="scope.row.auditStatus == 0" link type="danger"
                        @click="handleAudit(scope.row.id, -1)">驳回</el-button>
                    <!-- 上下架按钮 -->
                    <el-button v-if="scope.row.auditStatus == 1 && (scope.row.status == 0 || scope.row.status == -1)"
                        link type="primary" @click="handleUpdateStatus(scope.row.id, 1)">上架</el-button>
                    <el-button v-if="scope.row.auditStatus == 1 && scope.row.status == 1" link type="primary" plain
                        @click="handleUpdateStatus(scope.row.id, -1)">下架</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页控件 -->
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改商品对话框 -->
        <el-dialog :title="title" v-model="open" width="60%" append-to-body>
            <!-- 多步骤导航条 -->
            <el-steps :active="activeIndex" finish-status="success">
                <el-step title="Step 1" description="商品基本信息"></el-step>
                <el-step title="Step 2" description="商品SKU信息"></el-step>
                <el-step title="Step 3" description="商品详情信息"></el-step>
            </el-steps>
            <!-- 商品信息表单 -->
            <el-form ref="productRef" :model="form" :rules="rules" label-width="80px" style="margin-top: 20px;">
                <el-divider />
                <!-- 商品基本信息填写，步骤1 -->
                <div v-if="activeIndex == 0">
                    <!-- 商品名称 -->
                    <el-form-item label="商品名称" prop="name">
                        <el-input v-model="form.name" />
                    </el-form-item>
                    <!-- 商品分类 -->
                    <el-form-item label="分类" prop="category3Id">
                        <el-cascader :props="categoryProps" v-model="categoryIdList" @change="handleCategoryChange" />
                    </el-form-item>
                    <!-- 商品品牌 -->
                    <el-form-item label="品牌" prop="brandId">
                        <el-select v-model="form.brandId" class="m-2" placeholder="选择品牌">
                            <el-option v-for="item in categoryBrandList" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <!-- 计量单位 -->
                    <el-form-item label="计量单位" prop="unitName">
                        <el-select v-model="form.unitName" class="m-2" placeholder="计量单位">
                            <el-option v-for="item in unitList" :key="item.id" :label="item.name" :value="item.name" />
                        </el-select>
                    </el-form-item>
                    <!-- 商品轮播图上传 -->
                    <el-form-item label="轮播图" prop="sliderUrlList">
                        <el-upload v-model:file-list="sliderTempUrlList" :action="imgUpload.url"
                            :headers="imgUpload.headers" list-type="picture-card" multiple
                            :on-success="handleSliderSuccess" :on-remove="handleRemove">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </div>
                <!-- 商品SKU信息填写，步骤2 -->
                <div v-if="activeIndex == 1">
                    <!-- 商品规格选择 -->
                    <el-form-item label="选择规格">
                        <el-select :disabled="form.id != null" v-model="form.specValue" class="m-2" placeholder="选择规格"
                            size="default" @change="handleSpecValueChange">
                            <el-option v-for="item in specList" :key="item.specValue" :label="item.specName"
                                :value="item.specValue" />
                        </el-select>
                    </el-form-item>
                    <!-- 商品SKU信息列表 -->
                    <el-form-item label="商品SKU">
                        <el-table :data="form.productSkuList" border style="width: 100%">
                            <el-table-column prop="skuSpec" label="规格" width="180" />
                            <!-- SKU图片上传 -->
                            <el-table-column label="图片" #default="scope" width="80">
                                <el-upload class="avatar-uploader" :action="imgUpload.url" :headers="imgUpload.headers"
                                    :show-file-list="false"
                                    :on-success="(response, uploadFile, fileList) => handleSkuSuccess(response, uploadFile, fileList, scope.row)">
                                    <img v-if="scope.row.thumbImg" :src="scope.row.thumbImg" class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-table-column>
                            <!-- SKU售价 -->
                            <el-table-column label="售价" #default="scope">
                                <el-input v-model="scope.row.salePrice" />
                            </el-table-column>
                            <!-- SKU市场价 -->
                            <el-table-column label="市场价" #default="scope">
                                <el-input v-model="scope.row.marketPrice" />
                            </el-table-column>
                            <!-- SKU成本价 -->
                            <el-table-column label="成本价" #default="scope">
                                <el-input v-model="scope.row.costPrice" />
                            </el-table-column>
                            <!-- SKU库存数 -->
                            <el-table-column label="库存数" #default="scope">
                                <el-input v-model="scope.row.stockNum" />
                            </el-table-column>
                            <!-- SKU重量 -->
                            <el-table-column label="重量" #default="scope">
                                <el-input v-model="scope.row.weight" />
                            </el-table-column>
                            <!-- SKU体积 -->
                            <el-table-column label="体积" #default="scope">
                                <el-input v-model="scope.row.volume" />
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </div>
                <!-- 商品详情信息填写，步骤3 -->
                <div v-if="activeIndex == 2">
                    <!-- 详情图片上传 -->
                    <el-form-item label="详情图片">
                        <el-upload v-model:file-list="detailsImageTempUrlList" :action="imgUpload.url"
                            :headers="imgUpload.headers" list-type="picture-card" multiple
                            :on-success="handleDetailsSuccess" :on-remove="handleDetailsRemove">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </div>
                <!-- 提交信息，步骤4 -->
                <div v-if="activeIndex == 3">
                    <div style="font-size: large;margin: 30px 30px;">提交成功</div>
                </div>
            </el-form>
            <!-- 弹窗底部的操作按钮 -->
            <template #footer>
                <div class="dialog-footer">
                    <!-- 上一步按钮 -->
                    <el-button type="danger" @click="submitForm(-1)" :disabled="activeIndex == 0">上一步</el-button>
                    <!-- 下一步或提交按钮 -->
                    <el-button type="primary" @click="submitForm(1)">{{ activeIndex < 2 ? '下一步' : '提交' }}</el-button>
                            <!-- 取消按钮 -->
                            <el-button @click="cancel">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Product">
// 导入需要的API方法
import { listProduct, getProduct, delProduct, addProduct, updateProduct, updateStatus, updateAuditStatus } from "@/api/product/product";
import { getTreeSelect } from "@/api/product/category";
import { getCategoryBrandAll } from "@/api/product/categoryBrand";
import { getBrandAll } from "@/api/product/brand";
import { getUnitAll } from "@/api/base/productUnit";
import { getCategorySpecAll } from "@/api/product/productSpec";
import { getToken } from "@/utils/auth.js";

// 获取当前组件实例
const { proxy } = getCurrentInstance();

// 定义响应式变量和引用
const productList = ref([]); // 商品列表
const open = ref(false); // 弹窗开关
const loading = ref(true); // 加载标志
const showSearch = ref(true); // 搜索界面是否显示
const ids = ref([]); // 选中的商品ID列表
const single = ref(true); // 是否单选
const multiple = ref(true); // 是否多选
const total = ref(0); // 总商品数
const title = ref(""); // 弹窗标题

// 使用 reactive 定义响应式对象
const data = reactive({
    form: {}, // 表单数据
    queryParams: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示数量
        name: null, // 商品名称
        brandId: null, // 品牌ID
        category1Id: null, // 一级分类ID
        category2Id: null, // 二级分类ID
        category3Id: null, // 三级分类ID
        status: null, // 商品状态
        auditStatus: null // 商品审核状态
    },
    rules: {
        // 表单验证规则
        name: [
            { required: true, message: "商品名称不能为空", trigger: "change" }
        ],
        category3Id: [
            { required: true, message: "商品分类不能为空", trigger: "change" }
        ],
        brandId: [
            { required: true, message: "品牌不能为空", trigger: "change" }
        ],
        unitName: [
            { required: true, message: "商品单位不能为空", trigger: "change" }
        ],
        sliderUrlList: [
            { required: true, message: "轮播图不能为空", trigger: "change" }
        ]
    },
    imgUpload: {
        // 图片上传设置
        headers: {
            Authorization: "Bearer " + getToken() // 请求头部，带有Token
        },
        url: "http://localhost/dev-api/file/upload" // 图片上传的地址
    }
});

const { queryParams, form, rules, imgUpload } = toRefs(data); // 将 data 内的字段转换为引用

getList(); // 初始化时获取商品列表
/** 查询商品列表 */
function getList() {
    loading.value = true; // 设置加载标志
    listProduct(queryParams.value).then(response => {
        productList.value = response.rows; // 获取商品数据
        productList.value.forEach(item => {
            item.sliderUrlList = item.sliderUrls.split(',') // 处理商品轮播图
        })
        total.value = response.total; // 设置商品总数
        loading.value = false; // 取消加载标志
    });
}

// 取消按钮
function cancel() {
    open.value = false; // 关闭弹窗
    reset(); // 重置表单
}

// 表单重置
function reset() {
    form.value = {
        id: null, // 商品ID
        name: null, // 商品名称
        brandId: null, // 品牌ID
        category1Id: null, // 一级分类ID
        category2Id: null, // 二级分类ID
        category3Id: null, // 三级分类ID
        unitName: null, // 计量单位
        sliderUrls: null, // 轮播图URL
        specValue: null, // 规格值
        status: null, // 商品状态
        auditStatus: null, // 审核状态
        auditMessage: null, // 审核信息
        sliderUrlList: [], // 轮播图URL列表
        productSkuList: [], // 商品SKU列表
        detailsImageUrlList: [] // 详情图片URL列表
    };
    proxy.resetForm("productRef"); // 重置产品表单引用
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1; // 重置页码为第一页
    getList(); // 重新获取商品列表
}

/** 重置按钮操作 */
function resetQuery() {
    queryCategory2List.value = [] // 清空二级分类
    queryCategory3List.value = [] // 清空三级分类
    proxy.resetForm("queryRef"); // 重置查询表单引用
    queryParams.value.category1Id = null; // 清空一级分类
    queryParams.value.category2Id = null; // 清空二级分类
    queryParams.value.category3Id = null; // 清空三级分类
    queryParams.value.brandId = null; // 清空品牌
    handleQuery(); // 重新获取商品列表
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id); // 获取选中的ID列表
    single.value = selection.length != 1; // 根据选中数量设置是否单选
    multiple.value = !selection.length; // 根据选中数量设置是否多选
}

//分类搜索
const queryCategory1List = ref([]) // 一级分类列表
const queryCategory2List = ref([]) // 二级分类列表
const queryCategory3List = ref([]) // 三级分类列表
const getTreeSelectList = async (parentId, level) => {
    const { code, data, message } = await getTreeSelect(parentId) // 根据父级ID获取分类数据
    if (level == 1) {
        queryCategory1List.value = data // 赋值一级分类
    }
    if (level == 2) {
        queryCategory2List.value = data // 赋值二级分类
    }
    if (level == 3) {
        queryCategory3List.value = data // 赋值三级分类
    }
}
const selectcategory1 = () => {
    queryCategory2List.value = [] // 清空二级分类
    queryCategory3List.value = [] // 清空三级分类
    getTreeSelectList(queryParams.value.category1Id, 2) // 根据一级分类选择获取二级分类
}
const selectcategory2 = () => {
    queryCategory3List.value = [] // 清空三级分类
    getTreeSelectList(queryParams.value.category2Id, 3) // 根据二级分类选择获取三级分类
}
getTreeSelectList(0, 1) // 初始化获取一级分类
//品牌搜索
const queryBrandList = ref([]) // 品牌列表
const getBrandAllList = async () => {
    const { data } = await getBrandAll() // 获取所有品牌
    queryBrandList.value = data
}
getBrandAllList() // 初始化获取品牌列表

/** 新增按钮操作 */
function handleAdd() {
    reset(); // 重置表单
    open.value = true; // 打开弹窗
    title.value = "添加商品"; // 设置弹窗标题
    console.log(form.value) // 输出当前表单值
    // debugger

    // 清空步骤和临时列表
    activeIndex.value = 0
    sliderTempUrlList.value = []
    categoryIdList.value = []
    detailsImageTempUrlList.value = []
}

/** 修改按钮操作 */
function handleUpdate(row) {
    reset(); // 重置表单
    const _id = row.id || ids.value // 获取ID
    getProduct(_id).then(response => {
        form.value = response.data; // 设置表单值
        open.value = true; // 打开弹窗
        title.value = "修改商品"; // 设置弹窗标题

        activeIndex.value = 0 // 设置步骤索引
        sliderTempUrlList.value = [] // 清空临时图片
        detailsImageTempUrlList.value = [] // 清空详情图片

        // 设置分类ID列表
        categoryIdList.value = [
            form.value.category1Id,
            form.value.category2Id,
            form.value.category3Id,
        ]
        // 分割轮播图URL为列表
        form.value.sliderUrlList = form.value.sliderUrls.split(",")
        form.value.sliderUrlList.forEach(url => {
            sliderTempUrlList.value.push({ url: url }) // 设置临时图片
        })

        // 处理详情图片
        form.value.detailsImageUrlList.forEach(url => {
            detailsImageTempUrlList.value.push({ url: url }) // 设置详情图片
        })

        // 加载分类品牌和规格
        getCategoryBrand()
        getCategorySpec()
    });
}

/** 提交按钮 */
const activeIndex = ref(0) // 当前步骤索引
// function handlePrev() {
//   if (activeIndex.value-- < 0) activeIndex.value = 0
//   console.log(activeIndex.value)
// }
// function handleNext() {
//   if (activeIndex.value++ > 3) activeIndex.value = 3
//   submitForm()
//   console.log(activeIndex.value)
// }
function submitForm(index) {
    proxy.$refs["productRef"].validate(valid => {
        if (valid) {
            activeIndex.value = activeIndex.value + index // 更新步骤索引

            // 重新分配临时地址以显示新的上传图片
            sliderTempUrlList.value = []
            form.value.sliderUrlList.forEach(url => {
                sliderTempUrlList.value.push({ url: url })
            })

            // 重新分配详情图片临时地址
            detailsImageTempUrlList.value = []
            form.value.detailsImageUrlList.forEach(url => {
                detailsImageTempUrlList.value.push({ url: url })
            })

            if (activeIndex.value == 3) {
                form.value.sliderUrls = form.value.sliderUrlList.join(',') // 合并轮播图URL
                if (form.value.id != null) {
                    updateProduct(form.value).then(response => {
                        proxy.$modal.msgSuccess("修改成功");
                        open.value = false;
                        getList(); // 更新商品列表
                    });
                } else {
                    addProduct(form.value).then(response => {
                        proxy.$modal.msgSuccess("新增成功");
                        open.value = false;
                        getList(); // 更新商品列表
                    });
                }
            }
        }
    });
}

/** 删除按钮操作 */
function handleDelete(row) {
    const _ids = row.id || ids.value; // 获取ID或选中ID列表
    proxy.$modal.confirm('是否确认删除商品编号为"' + _ids + '"的数据项？').then(function () {
        return delProduct(_ids); // 删除商品
    }).then(() => {
        getList(); // 更新商品列表
        proxy.$modal.msgSuccess("删除成功"); // 提示删除成功
    }).catch(() => { });
}

//审核
function handleAudit(id, status) {
    const msg = status == 1 ? '是否确认审批通过商品编号为"' + id + '"的数据项？' : '是否确认审批驳回商品编号为"' + id + '"的数据项？'
    proxy.$modal.confirm(msg).then(function () {
        return updateAuditStatus(id, status); // 更新审核状态
    }).then(() => {
        getList(); // 更新商品列表
        proxy.$modal.msgSuccess("操作成功"); // 提示操作成功
    }).catch(() => { });
}

//上下架
function handleUpdateStatus(id, status) {
    const msg = status == 1 ? '是否确认上架商品编号为"' + id + '"的数据项？' : '是否确认下架商品编号为"' + id + '"的数据项？'
    proxy.$modal.confirm(msg).then(function () {
        return updateStatus(id, status); // 更新上下架状态
    }).then(() => {
        getList(); // 更新商品列表
        proxy.$modal.msgSuccess("操作成功"); // 提示操作成功
    }).catch(() => { });
}

//三级分类数据加载
//加载分类品牌
const categoryIdList = ref([]) // 分类ID列表
const categoryProps = ref([]) // 分类属性设置
categoryProps.value = {
    lazy: true, // 懒加载
    value: 'id', // 取值字段
    label: 'name', // 显示字段
    leaf: 'leaf', // 叶子节点标志
    async lazyLoad(node, resolve) {
        const { level } = node
        if (typeof node.value == 'undefined') node.value = 0
        console.log('=========' + node.value) // 输出节点值
        const { code, data, message } = await getTreeSelect(
            node.value
        )
        // 判断是否有子节点
        data.forEach(function (item) {
            item.leaf = !item.hasChildren
        })
        resolve(data)
    },
}

//处理分类change事件
const handleCategoryChange = () => {
    if (categoryIdList.value.length == 3) {
        form.value.category1Id = categoryIdList.value[0]
        form.value.category2Id = categoryIdList.value[1]
        form.value.category3Id = categoryIdList.value[2]
        getCategoryBrand() // 加载品牌
        getCategorySpec() // 加载规格
    }
    console.log(categoryIdList.value) // 输出分类ID列表
}
//加载品牌
const categoryBrandList = ref([]) // 分类品牌列表
const getCategoryBrand = async () => {
    if (form.value.category3Id == '') {
        proxy.$modal.msgError("请选择分类"); // 提示选择分类
        return
    }
    const { data } = await getCategoryBrandAll(form.value.category3Id)
    categoryBrandList.value = data
}

//加载商品单位
const unitList = ref([]) // 商品单位列表
const getUnitAllList = async () => {
    const { data } = await getUnitAll()
    unitList.value = data
}
getUnitAllList() // 初始化加载商品单位

// 上传商品轮播图图片
const sliderTempUrlList = ref([]) // 临时轮播图URL列表
const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles) // 打印移除的文件信息
    form.value.sliderUrlList.splice(form.value.sliderUrlList.indexOf(uploadFile.url), 1) // 从列表中移除URL
    console.log(form.value.sliderUrlList)
}
const handleSliderSuccess = (response, uploadFile) => {
    if (response.code == 200) {
        form.value.sliderUrlList.push(response.data.url) // 添加上传成功的图片URL
        console.log(form.value.sliderUrlList)
        console.log('--------------')
        console.log(sliderTempUrlList.value)
    } else {
        proxy.$modal.msgError(response.msg); // 提示上传错误
    }
}

//sku图片
const handleSkuSuccess = (response, uploadFile, fileList, row) => {
    console.log(response) // 打印响应
    console.log(uploadFile) // 打印上传文件信息
    row.thumbImg = response.data.url // 设置SKU图片URL
}

//加载商品规格
const specList = ref([]) // 商品规格列表
const getCategorySpec = async () => {
    if (form.value.category3Id == '') {
        proxy.$modal.msgError("请选择分类"); // 提示选择分类
        return
    }
    const { data } = await getCategorySpecAll(form.value.category3Id)
    specList.value = data
}

//规格变化，商品sku变化处理，取规格属性值 笛卡尔积生成sku
const handleSpecValueChange = val => {
    form.value.productSkuList = []
    let specValueList = JSON.parse(form.value.specValue)
    console.log(specValueList)

    // let array = [
    //   ['红色', '黑色', '白色'],
    //   ['16G', '32G'],
    // ]
    let array = [] // 定义组合规格二维数组
    specValueList.forEach(function (item) {
        let res = []
        item.valueList.map(x => {
            //res.push(item.key + ':' + x)
            res.push(x)
        })
        array.push(res)
    })
    // 取数组的笛卡尔积
    let result = array.reduce(
        (a, b, c) => {
            let res = []
            a.map(x => {
                b.map(y => {
                    res.push([...x, y])
                })
            })
            return res
        },
        [[]]
    )
    console.log(result) // 打印笛卡尔积结果
    result.forEach(function (item) { // 根据规格生成SKU
        form.value.productSkuList.push({
            skuSpec: item.join(' + '), // 规格组合为字符串
            skuSpecList: item, // 规格组合为列表
            price: 0, // 初始价格为0
        })
    })
}

// 上传商品详情图片
const detailsImageTempUrlList = ref([])
const handleDetailsRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles) // 打印移除的文件信息
    form.value.detailsImageUrlList.splice(
        form.value.detailsImageUrlList.indexOf(uploadFile.url),
        1
    ) // 从列表中移除URL
    console.log(form.value.detailsImageUrlList)
}
const handleDetailsSuccess = (response, uploadFile) => {
    console.log(response) // 打印响应
    form.value.detailsImageUrlList.push(response.data.url) // 添加上传成功的详情图片URL
    console.log(form.value.detailsImageUrlList)
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    width: 70px;
    height: 70px;
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    text-align: center;
}
</style>